<template>
  <view class="page">
    <view class="hd">
      <view class="prize-info mc-flex mc-flex-vcenter">
        <image src="../../../../static/images/ui_pifuxiaotubiao.png" mode="widthFix"></image>
        <view class="prize-info-right">
          <view class="prize-name">{{info.categoryName}}</view>
          <view class="prize-msg">任选一张</view>
        </view>
      </view>
      <view class="hd-cell mc-space-between mc-flex-vcenter">
        <text class="hd-cell_label">兑换单价</text>
        <text class="mc-red mc-f14"><text class="mc-f18 mr5">{{exchangeCoupon}}</text>张卷</text>
      </view>
      <!-- <view class="hd-cell mc-space-between">
        <text class="hd-cell_label">兑换单价</text>
        <view>
          <uni-number-box :min="1" :max="convertible" @change="changeNum"></uni-number-box>
          <view class="mc-g8 mc-f14 mc-text-centent mt2">（可兑换{{convertible}}张）</view>
        </view>
      </view> -->
    </view>
    <view class="bd">
      <view class="bd-title">填写收货信息</view>
      <view class="found-cells">
        <view class="found-cell">
          <view class="found-label">手机号：</view>
          <input type="number" v-model="phone" maxlength="11" placeholder="请输入您的手机号" />
        </view>
        <view class="found-cell">
          <view class="found-label">游戏区：</view>
          <input type="text" v-model="zone" placeholder="例:IOS QQ区" />
        </view>
        <view class="found-cell">
          <view class="found-label">角色昵称：</view>
          <input type="text" v-model="name" placeholder="所选游戏区的角色昵称" />
        </view>
        <view class="found-cell">
          <view class="found-label">QQ号：</view>
          <input type="text" v-model="qq" placeholder="您的QQ账号" />
        </view>
        <view class="found-cell">
          <view class="found-label">微信号：</view>
          <input type="text" v-model="wx" placeholder="您的微信账号" />
        </view>
      </view>
    </view>
    <view class="msg mc-f13">
      <view class="msg-title mc-red">温馨提示：</view>
      <view class="msg-content mc-g8">
        <view>1.请仔细填写收货信息，如因帐号异常、填写错误等原因无法充值，兑奖不予退还</view>
        <view>2.兑换后请主动联系客服QQ（点击复制）：<text class="mc-blue" @tap="setClipboardData(customerNum)">{{customerNum}}</text></view>
      </view>
    </view>
    <view class="foot-box">
      <view class="mc-space-between mc-flex-vcenter">
        <view class="mc-flex-auto p10-15">
          <view class="mc-f15">兑换总价：<text class="mc-f18 mc-red">{{total}}<text class="mc-f15 ml5">张劵</text></text></view>
          <view class="mc-g8 mc-f13">(您有{{tntegralNum}}张劵)</view>
        </view>
		<form @submit="setFormId" report-submit>
			<button form-type="submit" type="primary" @tap="sumbit">确认兑换</button>
		</form>
      </view>
    </view>
    <c-pop></c-pop>
  </view>
</template>

<script>
import { uniNumberBox } from '@dcloudio/uni-ui';
import { mapGetters, mapActions } from 'vuex';

let gData = {};
let _self;
const showToast = title => {
  uni.showToast({
    title: title || '',
    icon: 'none'
  });
};
export default {
  components: {
    uniNumberBox
  },
  data() {
    return {
      info: {},
      num: 1,
      customerNum: '743914078',

      phone: '',
      zone: '',
      name: '',
      qq: '',
      wx: ''
    };
  },
  computed: {
    ...mapGetters('user', ['_gameInfo']),
    tntegralNum: function() {
      return this._gameInfo.tntegralNum || 0;
    },
    exchangeCoupon: function() {
      return this.info.exchangeCoupon || 0;
    },
    convertible: function() {
      let convertible = 0;
      if (this.tntegralNum && this.exchangeCoupon) {
        convertible = Math.floor(this.tntegralNum / this.exchangeCoupon);
      }
      return convertible;
    },
    total: function() {
      let total = 0;
      if (this.exchangeCoupon) {
        total = this.num * this.exchangeCoupon;
      }
      return total;
    }
  },
  watch: {},
  methods: {
    ...mapActions('user', ['gameInfoUp']),
    ...mapActions('pop', ['popShow']),
    changeNum(num) {
      this.num = parseInt(num);
    },
    sumbit() {
      if (!this.phone) {
        showToast('请填写您的手机号码');
        return;
      }
      const remarks = [];
      let phoneStr = '手机号：' + this.phone;
      remarks.push(phoneStr);
      let zoneStr = this.zone ? '游戏区：' + this.zone : '';
      if (zoneStr) remarks.push(zoneStr);
      let nameStr = this.name ? '游戏昵称：' + this.name : '';
      if (nameStr) remarks.push(nameStr);
      let qqStr = this.qq ? 'QQ号：' + this.qq : '';
      if (qqStr) remarks.push(qqStr);
      let wxStr = this.wx ? '微信号：' + this.wx : '';
      if (wxStr) remarks.push(wxStr);
      let remark = remarks.join('，');
      console.log(remark);
      console.log(this.num);
	  this.$store.dispatch('videoAd/show',{
          success:async ()=> {
			  try{
			  	  await this.$api.home.userExchange({
			  	    remark,
			  	    num: this.num,
			  	    id: this.info.id
			  	  });
			  	  this.gameInfoUp();
			  	  this.popShow('CExchangeSuccess');
			  }catch(e){
				console.log(e);
				showToast('兑换失败');
			  }
          },
          fail:()=> {
			showToast('兑换失败');
          }
        });
    },
    setClipboardData(data) {
      uni.setClipboardData({
        data,
        success: function() {
          showToast('已复制');
        }
      });
    },
    //-------------------------------------------------------
    // 保存二维码
	setFormId(e){
		this.$store.dispatch('common/formIdListUp', { e:e, isSave:true })
	}
  },
  onLoad(options) {
    _self = this;
    this.info = JSON.parse(options.info);
    console.log('info', this.info);
    if (!this._gameInfo) {
      this.gameInfoUp();
    }
  },
  onUnload() {
    gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
  },
  onShareAppMessage(res) {
	const num=Math.floor(Math.random()*2+1);
	console.log(num)
    if (res.from === 'button') {
      // 来自页面内分享按钮
      console.log(res.target);
	  this.$util.navigateBack();
      this.popShow();
    }
    return {
      title: '伙伴们，我兑换了奖品，你也快来瞧瞧吧',
      path: '/pages/tabBar/home/index?shareUserId=' + this._gameInfo.userId,
      imageUrl: 'https://miaozhua-test.oss-cn-hangzhou.aliyuncs.com/luckKing/icon/share'+num+'.jpg'
    };
  }
};
</script>

<style lang="scss" scoped>
page,
input,
textarea {
  font-size: 30upx;
}

.page {
  background-color: #f0f0f0;
  padding-bottom: 150rpx;
}

.hd {
  padding: 0 30rpx;
  background-color: white;

  .prize-info {
    padding: 20rpx 0;

    image {
      width: 115rpx;
    }

    .prize-info-right {
      margin-left: 30rpx;
    }

    .prize-name {
      font-size: 30rpx;
      font-weight: bold;
    }

    .prize-msg {
      font-size: 26rpx;
      color: #888888;
      margin-top: 10rpx;
    }
  }

  .hd-cell {
    padding: 30rpx 0;
    border-top: 1px solid #e5e5e5;

    .hd-cell_label {
      font-size: 30upx;
    }
  }
}

.bd {
  padding: 0 30rpx;
  margin-top: 20rpx;
  background-color: white;

  .bd-title {
    font-size: 30rpx;
    line-height: 80rpx;
  }

  .found-cells {
    border-top: 1px solid #e5e5e5;
    padding: 30rpx 20rpx 10rpx;
  }

  .found-cell {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    input {
      padding: 10rpx 20rpx;
      margin-left: 20rpx;
      border: 1px solid #e5e5e5;
      flex: auto;
      height: 80rpx;
    }
  }

  .found-label {
    font-size: 30rpx;
    width: 150rpx;
    text-align: right;
    flex: none;
  }
}

.msg {
  padding: 20rpx 40rpx 30rpx;
  line-height: 40rpx;
}

.foot-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;

  button {
    border-radius: 0;
    height: 120rpx;
    line-height: 120rpx;
    padding-left: 80rpx;
    padding-right: 80rpx;
    background-color: #fe4157;
  }
}
</style>
